@import './var.less';
@import './css-variables.less';
@import './normalize.less';
@import './animation.less';
@import './mixins/ellipsis.less';
@import './mixins/hairline.less';

.@{rv-prefix}-ellipsis {
  .ellipsis();
}

.@{rv-prefix}-multi-ellipsis--l2 {
  .multi-ellipsis(2);
}

.@{rv-prefix}-multi-ellipsis--l3 {
  .multi-ellipsis(3);
}

.@{rv-prefix}-safe-area-bottom {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

[class*='@{rv-prefix}-hairline'] {
  &::after {
    .hairline();
  }
}

.@{rv-prefix}-hairline {
  &,
  &--top,
  &--left,
  &--right,
  &--bottom,
  &--surround,
  &--top-bottom {
    position: relative;
  }

  &--top::after {
    border-top-width: @border-width-base;
  }

  &--left::after {
    border-left-width: @border-width-base;
  }

  &--right::after {
    border-right-width: @border-width-base;
  }

  &--bottom::after {
    border-bottom-width: @border-width-base;
  }

  &,
  &-unset {
    &--top-bottom::after {
      border-width: @border-width-base 0;
    }
  }

  &--surround::after {
    border-width: @border-width-base;
  }
}

[class*='@{rv-prefix}-shadow'] {
  transition: box-shadow 0.2s linear;

  &:hover,
  &:active {
    box-shadow:
      rgba(0, 0, 0, 0.2) 0 2 * @hd 4 * @hd -1 * @hd,
      rgba(0, 0, 0, 0.14) 0 4 * @hd 5 * @hd 0,
      rgba(0, 0, 0, 0.12) 0 1 * @hd 10 * @hd 0;
  }
}

.@{rv-prefix}-shadow {
  &--1 {
    box-shadow:
      rgba(0, 0, 0, 0.2) 0 2 * @hd 1 * @hd -1 * @hd,
      rgba(0, 0, 0, 0.14) 0 1 * @hd 1 * @hd 0,
      rgba(0, 0, 0, 0.12) 0 1 * @hd 3 * @hd 0;
  }

  &--2 {
    box-shadow:
      rgba(0, 0, 0, 0.2) 0 3 * @hd 1 * @hd -2 * @hd,
      rgba(0, 0, 0, 0.14) 0 2 * @hd 2 * @hd 0,
      rgba(0, 0, 0, 0.12) 0 1 * @hd 5 * @hd 0;
  }

  &--3 {
    box-shadow:
      rgba(0, 0, 0, 0.2) 0 3 * @hd 3 * @hd -2 * @hd,
      rgba(0, 0, 0, 0.14) 0 3 * @hd 4 * @hd 0,
      rgba(0, 0, 0, 0.12) 0 1 * @hd 8 * @hd 0;
  }
}

.@{rv-prefix}-icon {
  &--spin {
    animation: rv-spin 1.5s infinite linear;
  }
}
